<template>
  <div>
    <Row>
      <Col span="4">
        <Card style="width:180px; height:120px" dis-hover="true">
          <div style="text-align: center">
            <Icon type="md-cube" />&nbsp;
            <b style="font-size: 20px; color: grey;">全部订单</b>
            <br />
            <span style="font-family:PingFang SC; font-size: 42px">{{num.all}}</span>
          </div>
        </Card>
      </Col>
      <Col span="4" offset="1">
        <Card style="width:180px; height:120px" dis-hover="true">
          <div style="text-align: center">
            <Icon type="md-cube" />&nbsp;
            <b style="font-size: 20px; color: #FF3333;">待付款</b>
            <br />
            <span style="font-family:PingFang SC; font-size: 42px">{{num.pay}}</span>
          </div>
        </Card>
      </Col>
      <Col span="4" offset="1">
        <Card style="width:180px; height:120px" dis-hover="true">
          <div style="text-align: center">
            <Icon type="md-cube" />&nbsp;
            <b style="font-size: 20px; color: blue;">待收货</b>
            <br />
            <span style="font-family:PingFang SC; font-size: 42px">{{num.sh}}</span>
          </div>
        </Card>
      </Col>
      <Col span="4" offset="1">
        <Card style="width:180px; height:120px" dis-hover="true">
          <div style="text-align: center">
            <Icon type="md-cube" />&nbsp;
            <b style="font-size: 20px; color: #FFCC00;">待评价</b>
            <br />
            <span style="font-family:PingFang SC; font-size: 42px">{{num.comment}}</span>
          </div>
        </Card>
      </Col>
      <Col span="4" offset="1">
        <Card style="width:180px; height:120px" dis-hover="true">
          <div style="text-align: center">
            <Icon type="md-cube" />&nbsp;
            <b style="font-size: 20px; color: #00BB00;">已完成</b>
            <br />
            <span style="font-family:PingFang SC; font-size: 42px">{{num.finish}}</span>
          </div>
        </Card>
      </Col>
    </Row>
    <br />
    <Row>
      <Card style="width:100%" dis-hover="true">
        <b>订单筛选</b>
        <hr class="hr" />
        <br />
        <span style="margin-left: 20px;">用户账号 &nbsp;</span>
        <Input v-model="params.name" placeholder="请输入" style="width: 200px" />
        <span style="margin-left: 50px;">订单状态 &nbsp;</span>
        <Select v-model="params.status" clearable style="width:200px">
          <Option value="1">待付款</Option>
          <Option value="2">待收货</Option>
          <Option value="3">待评论</Option>
          <Option value="4">已完成</Option>
        </Select>
        <span style="margin-left: 50px;">创建时间 &nbsp;</span>
        <DatePicker
          v-model="params.time"
          type="date"
          placeholder="Select date"
          style="width: 200px"
        ></DatePicker>

        <Button
          type="primary"
          size="default"
          shape="circle"
          icon="ios-search"
          style="margin-left: 130px;"
          @click="search"
        ></Button>
      </Card>
    </Row>
    <br />
    <Row>
      <Card style="width:100%" dis-hover="true">
        <Table border ref="selection" :columns="columns" :data="orderList"></Table>
        <br />
        <Row>
          <b>共{{total}}条记录</b>&nbsp;&nbsp;
          <Button type="primary" @click="exportExcel">导出全部订单</Button>
          <Page
            :total="total"
            :page-size="params.size"
            @on-change="changePage"
            style="float: right"
          />
        </Row>
      </Card>
    </Row>

    <Modal v-model="detailFlag" width="650px" title="详细信息" :footer-hide="true">
      <div style="font-size: 15px; margin-left: 40px">
        <span>配送费￥:</span>&nbsp;&nbsp;
        <b style="color: red">{{detailForm.sendCost}}</b>
        <br />
        <span>餐盒费￥:</span>&nbsp;&nbsp;
        <b style="color: red">{{detailForm.boxCost}}</b>
        <br />
        <span>选购商品:</span>
        <div style="margin-left: 80px" v-for="(item, idx) in detailForm.foodList" :key="idx">
          <img :src="'data:image/png;base64,'+item.img" width="50px" height="50px" />
          <b>{{item.name}} ￥{{item.sellPrice}} x {{item.amount}}</b>&nbsp;&nbsp;
        </div>
        <br />
        <span>商品总价￥:</span>&nbsp;&nbsp;
        <b style="color: red">{{detailForm.foodTotal}}</b>
        <br />
        <span>支付方式:</span>
        <b style="color: red">&nbsp;&nbsp;支付宝</b>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getUser } from "@/libs/util.js";
import * as myShopApi from "@/api/myShop.js";
import * as orderApi from "@/api/order.js";
import excel from "@/libs/excel";
export default {
  data() {
    return {
      detailFlag: false,
      detailForm: {
        boxCost: 0,
        sendCost: 0,
        foodList: [
          {
            name: "红烧茄子",
            img: ""
          }
        ],
        foodTotal: 0
      },
      params: {
        id: '',
        name: "",
        status: "",
        time: null,
        size: 10,
        page: 1
      },
      total: 0,
      orderList: [],
      num: {
        all: 0,
        pay: 0,
        finish: 0,
        comment: 0,
        sh: 0,
      },
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "订单编号",

          key: "orderId"
        },
        {
          title: "用户账号",

          key: "username"
        },
        {
          title: "订单金额",
          key: "totalMoney"
        },
        {
          title: "创建时间",

          key: "creatTime"
        },
        {
          title: "订单状态",
          key: "status",
          render: (h, params) => {
            if (params.row.status == 0) {
              return h("div", [
                h(
                  "div",
                  {
                    style:
                      "display: inline-block;width: 6px;height: 6px; border-radius: 50%; background-color:red;"
                  },
                  ""
                ),
                h("span", "已删除")
              ]);
            } else if (params.row.status == 1) {
              return h("div", [
                h(
                  "div",
                  {
                    style:
                      "display: inline-block;width: 6px;height: 6px; border-radius: 50%; background-color:yellow;"
                  },
                  ""
                ),
                h("span", "待付款")
              ]);
            } else if (params.row.status == 2) {
              return h("div", [
                h(
                  "div",
                  {
                    style:
                      "display: inline-block;width: 6px;height: 6px; border-radius: 50%; background-color:blue;"
                  },
                  ""
                ),
                h("span", "待收货")
              ]);
            } else if (params.row.status == 3) {
              return h("div", [
                h(
                  "div",
                  {
                    style:
                      "display: inline-block;width: 6px;height: 6px; border-radius: 50%; background-color:blue;"
                  },
                  ""
                ),
                h("span", "待评价")
              ]);
            } else {
              return h("div", [
                h(
                  "div",
                  {
                    style:
                      "display: inline-block;width: 6px;height: 6px; border-radius: 50%; background-color:#67C23A;"
                  },
                  ""
                ),
                h("span", "已完成")
              ]);
            }
          }
        },
        {
          title: "操作",
          key: "action",
          width: "200",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.detail(params.row.orderId);
                    }
                  }
                },
                "查看订单"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.orderId);
                    }
                  }
                },
                "关闭订单"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    initList: function() {
      myShopApi.orderList(this.params).then(res => {
        if (res.data.code == 200) {
          this.orderList = res.data.data.list;
          this.total = res.data.data.total;
        }
        // this.timer = setInterval(this.check, 2000);
      });
      myShopApi.initNum(this.params.id).then(res => {
        if (res.data.code == 200) {
          this.num.pay = res.data.data[1];
          this.num.finish = res.data.data[4];
          this.num.comment = res.data.data[3];
          this.num.all = res.data.data[0];
          this.num.sh = res.data.data[2];
        }
      });
    },
    changePage: function(page) {
      this.params.page = page;
      this.initList();
    },
    search: function() {
      this.params.page = 1;
      this.initList();
    },
    check: function() {
      myShopApi.check(this.params.id).then(res => {
        if (res.data.code == 200) {
          console.log("have new");
          this.initList();
        }else {
          console.log("none");
        }
      });
    },
    detail: function(orderId) {
      orderApi.detail(orderId).then(res => {
        if (res.data.code == 200) {
          this.detailFlag = true;
          this.detailForm = res.data.data;
        }
      });
    },
    remove: function(orderId) {
      this.$Modal.confirm({
        title: "警告",
        content: "<p>您确定要删除这条记录吗?</p>",
        onOk: () => {
          orderApi.remove(orderId).then(res => {
            if (res.data.code == 200) {
              this.$Message.success("删除成功");
              this.initList();
            } else {
              this.$Message.success(res.data.message);
            }
          });
        },
        onCancel: () => {}
      });
    },
    exportExcel() {
      if (this.orderList.length) {
        orderApi.findAll().then(res => {
          this.exportLoading = true;
          const params = {
            title: [
              "订单编号",
              "用户账号",
              "订单金额",
              "创建时间",
              "订单状态"
            ],
            key: [
              "orderId",
              "username",
              "totalMoney",
              "creatTime",
              "status"
            ],
            data: res.data.data,
            autoWidth: true,
            filename: "商家信息"
          };
          excel.export_array_to_excel(params);
          this.exportLoading = false;
        });
      } else {
        this.$Message.info("表格数据不能为空！");
      }
    }
  },
  mounted() {
    var s = getUser();
    this.params.id = s.slice(4);
    this.initList();
  }
};
</script>
